<template>
  <main ref="el" class="operators">
    <section class="operators__group">
      <i
        :alt="name"
        class="operators__group--btn resume"
        :style="{ cursor: name === 'drag' ? 'grab' : 'pointer' }"
        v-for="(name, index) in operators"
        :key="index"
        :class="`resume-${name}`"
        @click="onClick(name)"
        @mousedown.prevent="onMouseDown(name, $event)"
      />
    </section>
    <slot></slot>
  </main>
</template>

<script>
import { ref } from "vue";
const operators = ["drag", "edit", "setting", "skin", "add"];
export default {
  name: "ROperator",
  props: {
    operators: {
      type: Array,
      default: () => [],
      validator(value) {
        return value.every((item) => operators.includes(item));
      },
    },
  },
  emits: [...operators],
  setup(props, ctx) {
    const el = ref(null);
    const onClick = (name) => {
      if (name !== "drag") {
        ctx.emit(name);
      }
    };
    const onMouseDown = (name, event) => {
      if (name === "drag") {
        ctx.emit(name, event, el.value);
      }
    };
    return {
      el,
      onClick,
      onMouseDown,
    };
  },
};
</script>

<style scoped lang="less">
.operators {
  box-sizing: border-box;
  position: relative;
  border: 1px dashed transparent;
  &:hover {
    border-color: deepskyblue;
    .operators__group {
      display: block;
    }
  }
  &__group {
    display: none;
    position: absolute;
    right: 1px;
    top: 0;
    color: lightskyblue;

    &--btn {
      margin-left: 5px;
      width: 18px;
      height: 18px;

      &:hover {
        filter: brightness(105%);
      }
    }
  }
}
</style>
